<template lang="">
  <div class="deposit">
    <a-form
        :model="formState"
        name="time_related_controls"
        v-bind="formItemLayout"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
        <a-form-item 
            name="payChannel" 
            :label="$t('zhiF')" 
            :rules="[{ required: true, message: '请选择支付渠道!' }]"
        >
            <a-radio-group 
                v-model:value="formState.payChannel" 
                size="large"
            >
                <a-radio-button 
                    v-for="(item, index) in depositSettingList"
                    :key="'depositSetting' + item.id"
                    :value="item.id"
                    class="pay-radio"
                >
                   <img :src="item.logo" alt="item.name"/>
                </a-radio-button>
            </a-radio-group>
        </a-form-item>

        <a-form-item 
            name="paymentMethod" 
            :label="$t('zhiF-0')" 
            v-if="curPaymentMethod.length > 0"
            :rules="[{ required: true, message: '请选择支付方式!' }]"
        >
            <a-radio-group 
                v-model:value="formState.paymentMethod" 
                size="large"
            >
                <a-radio-button 
                    v-for="(item, index) in curPaymentMethod"
                    :key="'payment-item' + item.id"
                    :value="item.id"
                    class="payment-method-radio"
                >
                   <p style="margin: 0">{{ item.name }}</p>
                   <p style="margin: 0">{{ $t('danB', [item.currency, item.single_min_amount, item.single_max_amount]) }}</p>
                </a-radio-button>
            </a-radio-group>
        </a-form-item>

        <a-form-item 
            name="amount" 
            :label="$t('chong')"
            :rules="[{ required: true, message: '请填写充值金额!' }]"
        >
            <a-input-number v-model:value="formState.amount" :min="200" size="large" style="width: 240px"/>
        </a-form-item>
      
        <a-form-item
            :wrapper-col="{
                xs: { span: 24, offset: 0 },
                sm: { span: 16, offset: 8 },
            }"
        >
            <a-button :loading="logading" type="primary" html-type="submit" size="large" style="width: 200px">{{ $t('xiaY') }}</a-button>
        </a-form-item>

        <div v-if="!hasUSDT">
            <h4>{{ $t('wenX-0') }}</h4>
            <ul>
                <li style="color: red">{{ $t('xian-0') }}</li>
                <li>{{ $t('jian') }}</li>
                <li>{{ $t('gong-2') }}</li>
                <li>{{ $t('ruHu') }}</li>
            </ul>
        </div>
        <div v-else>
            <h4>{{ $t('wenX-1') }}</h4>
            <ul>
                <li>{{ $t('jian-0') }}</li>
                <li>
                    {{ $t('zunJ') }}
                </li>
            </ul>
        </div>
    </a-form>

    <UsdtDepositModal 
        :paymentId="curPaymentId" 
        :depositSettingId="curDepositSettingId"
        :rechargeAmount="curRechargeAmount" 
        :visible="modalVisible" 
        @cancel="modalVisible=false" 
        @ok="gotoDepositRecord" 
    />

  </div>
</template>
<script setup lang="ts">
import { createDepositApplication, getDepositSettings } from '@/api/financial';
import { ref, onBeforeMount } from 'vue';
import UsdtDepositModal from '@/components/UsdtDepositModal/UsdtDepositModal.vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const curTab = ref('bank');
const curAmount = ref('');
const depositSettingList = ref<any[]>([]);
const curDepositSetting = ref<any>();
const curPaymentMethod = ref<any[]>([]);
const hasUSDT = ref<boolean>(true);
const logading = ref<boolean>(false);

const curPaymentId = ref('');
const curDepositSettingId = ref('');
const curRechargeAmount = ref('');
const modalVisible = ref<boolean>(false);
const router = useRouter();
const emit = defineEmits([ "switch" ]);

const formItemLayout = {
    labelCol: {
        xs: { span: 3 },
        sm: { span: 3 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
    },
};

interface FormState {
    "payChannel": string;
    "paymentMethod": string;
    'amount': string;
}
const formState = reactive({
    payChannel: '',
    paymentMethod: '',
    amount: ''
} as FormState);


const onFinish = (values: any) => {
    console.log('Success:', values, formState);
    const { amount, payChannel } = values;
    
    if (
        curDepositSetting.value 
        && formState.paymentMethod
    ) {
        curDepositSettingId.value = curDepositSetting.value.id;
        const paymentId = formState.paymentMethod;
        if (paymentId) {
            modalVisible.value = true;
            curPaymentId.value = paymentId;
        }
        curRechargeAmount.value = amount;
    }
    
};

const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
};

function switchTab(tab: string) {
    curTab.value = tab;
}
function quickSelection(amount: string) {
    curAmount.value = amount;
}

function gotoDepositRecord() {
    modalVisible.value =false
    emit('switch', '2');
}
watch(
() => formState.payChannel,
(newVal) => {
    console.log(newVal);
    const curItem = depositSettingList.value.find((item: any) => item.id == newVal);
    if (curItem != null) {
        curDepositSetting.value = curItem;
        if (curItem.name && (curItem.name.toLowerCase().includes('usdt'))) {
            hasUSDT.value = true;
        } else {
            hasUSDT.value = false;
        }

        if (Array.isArray(curItem.payment_method_objects)) {
            curPaymentMethod.value = curItem.payment_method_objects;
        } else {
            curPaymentMethod.value = [];
        }

        formState.paymentMethod = '';
    }
})


function fetchDepositSetting() {
    getDepositSettings()
        .then((res: any) => {
            const list = res.list || [];
            if (Array.isArray(list)) {
                depositSettingList.value = list.filter((item) => item.device === 2 && item.status === 2)
            }
        })
}

onBeforeMount(() => {
    fetchDepositSetting();
})

</script>

<style lang="less" scoped>
.pay-radio {
    margin-bottom: 10px;
    margin-right: 10px;
    height: 40px;
    line-height: 40px;
    img {
        height: 28px;
        margin-right: 5px;
    }
}
.payment-method-radio {
    padding-top: 5px;
    padding-bottom: 5px;
    height: 55px;
    p {
        line-height: 1.5;
    }
}
</style>